<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>p43-45钩子函数实现小球半场动画</title>
    <style>
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
    }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        >
            <div class="ball" v-if="flag"></div>
        </transition>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods:{
                beforeEnter(el){
                    // beforeEnter表示动画入场之前，此时动画尚未开始，可以在beforeenter中，设置元素开始动画之前的样式
                    // 设置小球在开始动画之前的起始位置
                    el.style.transform="translate(0,0)";
                },
                enter(el,done){
                    // enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
                    el.offsetWidth
                    el.style.transform="translate(150px,450px)";
                    el.style.transition="all 1s ease";
                    //这里的done，其实就是afterenter函数
                    done();
                },
                afterEnter(el){
                    // 动画完成之后会调用
                    this.flag=!this.flag;
                }
            },
            filters:{},
            directives:{}
        })
    </script>
</body>
</html>